<!--
* @Description: 组件界面下的table说明
* @Author: Rulyc
* @Operating:
-->
<template>
  <div class="TableDes">
    <h1>{{ title }} </h1>
    <table>
      <thead>
      <tr>
        <th v-for="(head, index) in headList" :key="head+index">{{ head }}</th>
      </tr>
      </thead>
      <tbody>
      <tr  v-for="(column, index) in columnList" :key="'columnList'+index">
        <td v-for="(col, index1) in column" :key="'columnCol'+1"> {{ col }} </td>
      </tr>
      </tbody>
    </table>
  </div>

</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: "TableDes",
    props: {
      title: { // 标题
        type: String,
        required: false,
        default: 'Attributes'
      },
      headList: { // 表头
        type: Array,
        required: true,
      },
      columnList: { // 表格数据
        type: Array,
        required: true,
      }
    }
  })
</script>

<style lang="scss" scoped>
  .TableDes {
    overflow: auto;
    h1 {
      margin: 40px 0 20px 0;
    }
    table{
      border-collapse: collapse;
      width: 100%;
      background-color: #fff;
      font-size: 14px;
      margin-bottom: 45px;
      line-height: 1.5em;
      display: table;
      box-sizing: border-box;
      text-indent: initial;
      border-spacing: 2px;
      border-color: grey;
      thead {
        display: table-header-group;
        vertical-align: middle;
        border-color: inherit;
        text-align: left;
        th {
          text-align: left;
          white-space: nowrap;
          color: #909399;
          font-weight: 400;
          background: #f7f7f7;
          color: #5c6b77;
        }
      }
      td,th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        color: rgba(0,0,0,.65);
      }
       td:first-child {
        background: #fcfcfc;
        font-weight: 500;
        /*width: 20%;*/
        font-family: Lucida Console,Consolas,Menlo,Courier,monospace;
      }
    }
  }
</style>
